<template>
<!-- 原生表格 -->
  <div>
    <el-card class="box-card">
      <div>
        <el-button style="float: left" type="warning" size="small" @click="$exportTable.exportFn('#table','自定义表格')">导出</el-button>
      </div>
    </el-card>
      <table border="1" cellspacing="0" cellpadding="0" id="table" width="1200px">
        <tr v-for="(item,index) in tableData" :key="index">
          <td><b>商户名称</b> </td>
          <td style="text-align:right">{{item.partnerNa}}</td>
          <td><b>楼层</b> </td>
          <td>{{item.propertyPlaceId}}</td>
          <td><b>铺位编号</b> </td>
          <td>{{}}</td>
          <td><b>店铺名称</b> </td>
          <td>{{item.storeShortNa}}</td>
          <td><b>面积(m²)</b> </td>
          <td>{{item.useArea}}</td>
          <td><b>合同编号</b> </td>
          <td class="contractno">{{item.contractNo}}</td>
        </tr>
      </table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          storeShortNa: '12987122',
          partnerNa: '王小虎',
          contractNo: '0.00',
          useArea: '3.2',
          propertyPlaceId: 10
        }, {
          storeShortNa: '12987123',
          partnerNa: '王小虎',
          contractNo: '000000000165',
          useArea: '2021-02-01',
          propertyPlaceId: 12
        }, {
          storeShortNa: '12987124',
          partnerNa: '王小虎',
          contractNo: '324',
          useArea: '1.9',
          propertyPlaceId: 9
        }, {
          storeShortNa: '12987125',
          partnerNa: '王小虎',
          contractNo: '000000621',
          useArea: '2.2',
          propertyPlaceId: 17
        }, {
          storeShortNa: '12987126',
          partnerNa: '王小虎',
          contractNo: '539',
          useArea: '4.1',
          propertyPlaceId: 15
        }]
      };
    },
   
  };
</script>
<style scoped>
.contractno{
  text-align: left;
}
</style>